<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="../../dist/mermaid.css"/>
    <script src="../../dist/mermaid.js"></script>
    <style>
        .cluster {
            fill: #fcac93;
            rx:4px;
            stroke: grey;
        }
        .cssClass > rect{
            fill:#FF0000;
            stroke:#FFFF00;
            stroke-width:4px;
        }
    </style>
    <link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
    <body>
    <h1>Css classes</h1>
    A should have a red background with styling from class.
    <div class="mermaid" id="i211">
    graph LR;
        A-->B[AAA<span>BBB</span>];
        B-->D;
        class A cssClass;

    </div>
    A should have a red background with styling from style definition.
    <div class="mermaid" id="i212">
    graph LR;
        A-->B[AAA<span>BBB</span>];
        B-->D;
        style A fill:#FF0000,stroke:#FFFF00,stroke-width:4px;
    </div>

    A should have orange background with styling from local class definition definition.
    <div class="mermaid" id="i213">
    graph LR;
        A-->B[AAA<span>BBB</span>];
        B-->D;
        classDef orange fill:#f96,stroke:#333,stroke-width:4px;
        class A orange;
        linkStyle 0 stroke:#ff3,stroke-width:4px;
        classDef default fill:#f9f,stroke:#333,stroke-width:4px;
    </div>
    </body>
</html>
